import React from 'react'
import { Modal, Spin, Select } from 'antd'

import request from '@/Utils/fecth'

import { address } from '@/Utils/apiConfig'
const { organizationManagement: { logs: logUrl }} = address
const { Option } = Select

export default class Logger extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      startTime: '', // 开始时间
      loading: false,
      logs: [],
      size: 50,
    }
  }

  componentDidMount() {
    this.getLogs()
  }

  async getLogs() {
    this.setState({
      loading: true,
    })
    let res = await request().get(logUrl, {
      params: {
        containerName: this.props.peerData.domain,
        size: this.state.size,
        from: 0,
      },
    })
    this.setState({
      loading: false,
    })
    if (res && res.status === 200) {
      const data = res.data || {}
      this.setState({
        logs: data.logs || [],
      })
    }
  }

  onTimeChange = (date) => {
    this.setState({
      startTime: date,
    })
  }

  onChange = (val) => {
    this.setState({
      size: val,
    }, this.getLogs)
  }

  render() {
    const { logs } = this.state
    const { peerData } = this.props
    return <Modal
      title="日志"
      visible={true}
      footer={null}
      centered={true}
      onCancel={() => {
        this.props.onCancel && this.props.onCancel()
      }}
      className="monitor-modal"
      width={1044}>
      <div className="current-peer-info">
        <div className="peer-name">
          当前节点：{peerData.name}
        </div>
        <div className="monitor">
          {/* 从 <DatePicker style={{ margin: '0 8px' }} value={startTime} onChange={this.onTimeChange} /> 至今 */}
          条数：<Select style={{ width: '120px', marginLeft: '8px' }} value={this.state.size} onChange={this.onChange}>
            <Option value={50}>50</Option>
            <Option value={100}>100</Option>
            <Option value={500}>500</Option>
          </Select>
        </div>
      </div>
      <Spin spinning={this.state.loading}>
        <div className="logger-content" style={{ padding: '12px', maxHeight: '60vh', overflow: 'auto', minHeight: '30vh', whiteSpace: 'pre-wrap' }}>
          {
            logs.map((v, i) => {
              return <p key={i}>{v}</p>
            })
          }
        </div>
      </Spin >
    </Modal>
  }
}
